<template>
  <div class="app-container">
    <el-form ref="form" :model="option" label-width="120px">
      <el-form-item label="订单从属用户">
        <span>{{ option.userId.userName }}</span>
      </el-form-item>
      <el-form-item label="商品名称">
        <span>{{ option.articleId.articles }}</span>
      </el-form-item>
      <el-form-item label="订单生成时间">
        <span>{{ option.time }}</span>
      </el-form-item>

      <el-form-item label="订单备注">
        <span>{{ option.userId.type }}</span>
      </el-form-item>
      <el-form-item label="总价">
        <span>{{ option.articleId.price }}</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">删除</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import orderApi from "../../api/orders.js";
export default {
  data() {
    return {
      option: [{
        time:"",
        totle:"",
        articleId:{},
        userId:{}
      }],
    };
  },
  methods: {
    async onSubmit() {
         this.$alert('确定删除订单信息？', '警告！', {
          confirmButtonText: '确定',
         callback: () => {
            this.$message({
              type: 'info',
              message: `${ "删除成功" }`
            });
        orderApi.delete(this.option._id);
      this.$router.push({name:`Orders`}) 
          }
        });
      // await orderApi.update(this.option);
      //  this.$router.push({name:'Orders'})
    },
  },
  created() {
    this.option = this.$route.params;
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

